<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title><link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/iconfont/iconfont.css" />
<style>
section {
	padding-bottom: 6rem;
}

section .container .title {
	padding: .4rem 2rem;
	background-color: #eaeaea;
}

section .container ul.ulcon li {
	background-color: #fff;
	padding: .6rem 0;
}

section .container ul.ulcon li .icon {
	padding: 4px;
	border-radius: 6px;
	margin-right: 5%;
}

section .container ul.ulcon li i {
	color: #c7c7c7;
	font-size: 2.2rem;
	transform-origin: 10px;
}

section .container ul.ulcon li .info .posbor {
	position: absolute;
	width: 100%;
	bottom: 0;
}

section .container ul.ulcon li .info i {
	font-size: 2rem;
	display: none;
	opacity: 1;
}

section .container ul.ulcon li i.fail {
	color: #fd0421;
	opacity: 0;
}

section .container ul.ulcon li i.success {
	color: #5cb85c;
	display: none;
}

section .container ul.ulcon li label {
	padding: 2% 5%;
	width: 90%;
	align-items: center;
}

section .container ul.ulcon li label span {
	font-size: 1.5rem;
	padding: 0;
	padding-right: .8rem;
}

section .container ul.ulcon li label input {
	color: #a7a7a7;
	width: 100%;
	font-size: 1.6rem;
}

section .container ul.ulcon li label input[type=date] {
	color: #333;
}

section .container ul.ulcon li label select {
	font-size: 1.6rem;
}

section .container a {
	display: block;
	padding: 3% 0;
	width: 90%;
	text-align: center;
	margin: 3% auto;
	border-radius: 6px;
	background-color: #5cb85c;
	color: #fff;
}

section .container a:active {
	background-color: #59ab59;
}

::-webkit-input-placeholder {
	color: #fd0421;
}
</style>
<script src="/assets/js/jquery-3.1.1.min.js"></script>
</head>
<body>
	<!-- header start -->
	#@userHead()
	<!-- end header -->
	#@loadContainer()
	<section id="app" class="visiblecon sectrans">
		<div class="container">
			<p class="title">新增订单</p>
			<form id="form">
				<ul class="ulcon t_bor b_bor" id="ulcon"></ul>
				<a href="javascript:;" class="subbtn" id="subbtn">提交</a>
			</form>
		</div>
	</section>

	<!-- footer start -->
	#--#@footer(2)--#
	<!-- end footer -->

	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
    	$(function(){
			$.ajax({
                "type":"post",
                "url": "/makeprice/getJson/1",
                "dataType":"json",
                "success":function(data){  
                	console.log(data)
                	getBaseTab(data,showSuc);
                }
            })
            
            function showSuc(){
    			$("#app").removeClass("visiblecon");
    			$("#load-container").removeClass("load7");
        	}
            
            function getBaseTab(data,callback){
				if(_x.isEmpty(data))return false;
				var html = "";
				data.forEach(function(obj){
					var input = "",
						selectVal = obj.selectValue;
					if(_x.isEmpty(selectVal)){
						var type = "text";
						if(obj.iputType == "number"){
							type = "tel";
						}				
						input = "<input class='flex empty' type="+ type +" id="+ obj.paramterName +" name="+ obj.paramterName +" />";
					}else{
						var selects = selectVal.split(",");
						input = "<select id="+ obj.paramterName +" name="+ obj.paramterName +" class="+ obj.paramterName +"><option value=''>--请选择--</option>";
						selects.forEach(function(opt){
							input += "<option value="+ opt +">"+ opt +"</option>";
						})
						input += "</select>";
					}
					html = "<li class='b_bor'>"+
			           	    "    <label class='flexbox'>"+
			                "        <div class='icon'>"+
			                "            <i class='iconfont fail'>&#xe602;</i>"+
			                "            <i class='iconfont success'>&#xe641;</i>"+
			                "        </div>"+
			                "        <span>"+ obj.zhExpl +":</span>"+
			                		input+
			                "	  </label>"+		
			                "</li>";
					$("#ulcon").append(html);
					if(data.length == $("#ulcon li").length){
						callback();
					}
				});
			}
			
			$("#ulcon").on("blur",".empty",function(){
				isNotEmpty($(this))
			});
			
			$("#ulcon").on("change",".itemType",function(){
				var iconDom = $(this).siblings(".icon");
				if(_x.isEmpty($(this).val())){
					iconDom.children(".success").hide().siblings(".fail").show().css("opacity",1);
				}else{
					iconDom.children(".fail").hide().siblings(".success").show();
				}
			});
			
			$("#subbtn").click(function(){
				var inputs = $("#ulcon").find(".empty"),
					mark = true;
				if(_x.isEmpty($("#itemType").val())){
					mark = false;
					var iconDom = $("#itemType").siblings(".icon");
					iconDom.children(".success").hide().siblings(".fail").show().css("opacity",1);
				}
				inputs.each(function(){
					if(!isNotEmpty($(this))){
						mark = false;
					}
				})
				if(mark){
					var data = $("#form").serialize();
					$.ajax({
						type:"post",
						url:"/makeprice/submitOrder",
						data:data,
						success:function(data){
							if(data.code == "1"){
								alert("申请成功！");
								window.location.href = data.msg;
							}else{
								_x.showTip("申请失败，请填写完整信息！");
							}							
						},
						error:function(){
							_x.showTip("申请失败，请填写完整信息！");
						}
					});
				}
			});
			
			function isNotEmpty(input){
				var iconDom = input.siblings(".icon");
				if(_x.isEmpty(input.val())){
					iconDom.children(".success").hide().siblings(".fail").show().css("opacity",1);
					input.attr("placeholder","此项不能为空！");
					return false;
				}
				
				if(input.attr("name") == "phone"){
					if(input.val().length != 11 || /[^0-9]/.test(input.val())){
						iconDom.children(".success").hide().siblings(".fail").show().css("opacity",1);
						input.attr("placeholder","手机号码无效！");
						return false;
					}
				}
				
				if(input.attr("name") == "idNo"){
					if(!/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(input.val())){
						iconDom.children(".success").hide().siblings(".fail").show().css("opacity",1);
						input.attr("placeholder","身份证号码无效！");
						return false;
					}
				}
				iconDom.children(".fail").hide().siblings(".success").show();
				return true;
			};
    	});
    </script>
</body>
</html>